<template>
  <div class="config-box flex-column">
    <span class="config-label">样式属性</span>
    <!-- <div class="config-main flex-column">
      <el-color-picker class="config-item" v-model="formItem.configH5.backgroundColor"></el-color-picker>
    </div> -->
    <div class="config-main flex-column">
      <el-checkbox class="config-item" v-model="formItem.configH5.noStyle">去除样式</el-checkbox>
    </div>
    <div class="config-main flex-column" v-if="formItem.configH5.noStyle">
      <upload-image class="config-item" v-model="formItem['configH5']['imageUrl']" icon-name="sfz-fm">
      </upload-image>
    </div>
  </div>
</template>

<script>
import {fontSizeList, fontFamilyList} from '@/formgen/components/FormConfig/config.js'
export default {
  name: 'ConfigDRecord',
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  watch: {
    value: {
      handler: function(obj){
        this.formItem = obj
      },
      deep: true,
      immediate: true
    }
  },
  components: {
    'upload-image': () => import('@/views/components/uploadImage/index')
  },
  data(){
    return {
      formItem: this.value || {},
      fontSizeList: fontSizeList,
      fontFamilyList,
    }
  },
  methods: {
    configChange(){
      this.$emit('input', this.formItem)
    },
  }
} 
</script>

<style scoped lang="scss">
.config-box{
  padding-right: 10px;
  .config-label{
    font-size: 13px;
    color: #3E3E3E;
    margin-bottom: 15px;
  }
  .config-item{
    margin-bottom: 15px;
  }
}
</style>
